Using Cascading Style Sheets > Creating a style sheet > Creating styles with tag selectors
 		><

Creating styles with tag selectors


One of the most useful features of cascading style sheets is the ability to reformat the visible part of an HTML document based on its structure--that is, its hierarchy of tags. By using tags as selectors, you can enhance the presentation of a document and maintain downward compatibility as a courtesy to viewers with non-CSS browsers. This means that users of 4.0 browsers will see the extra formatting that CSS permits, while the rest of your audience will see a plain (but structured) document.

You can use tag selectors in two different ways:
  • Simple tag selectors reformat all instances of a particular tag within your page. For example, if you create a style with h1 as the selector and the text properties 36 point and sans serif, all <H1> headers will appear that way.
  • Contextual tag selectors reformat all instances of a particular tag enclosed within another tag. For example, if you create a style with h1 i as the selector and assign a special text color, a CSS-savvy browser will display all <I> tags within <H1> headers as colored text.

    • Note: Adobe GoLive does not preview contextual tag selectors, either in Layout or Preview views. You must open the file in a CSS-compliant browser to see the result.

    To create a style based on a tag selector:

    1 With the Style Sheet window in the foreground, click the New Tag button () in the Style Sheet toolbar. The new style is listed under its style sheet, with its name selected.

    2 In the Basics tab () of the CSS Selector Inspector, name the tag selector in the Name text box, and press Enter.

    Tag selectors are HTML start tags with the less than and greater than (< and >) characters stripped off--for example, h2 for second-level headers, p for plain-text paragraphs, i for italicized, and b for boldface inline formatting. You can add tag selectors for several common HTML elements relating to links, body, paragraphs, and table cells) by right-clicking (Windows) or Control-clicking (Mac OS) in the Style Sheet window and choosing a tag from the Add Selector submenu.

    Note: You can reformat the hyperlinks in your page by using "A" as a tag selector.

    3 In the CSS Selector Inspector, add style properties. For more information, see Defining style properties.

    4 Any new style properties you add are automatically applied to paragraphs or blocks of text formatted with the tag used as the selector.

    A. Basics tab of the CSS Selector Inspector B. Tag selector C. Style properties

    Using Cascading Style Sheets > Creating a style sheet > Creating styles with tag selectors